<!--
  Dynamic table template
-->
<hz-magic-search-context filter-facets="filterFacets">
  <div hz-table
    track-rows-by="config.trackId"
    ng-cloak
    st-magic-search
    st-table="items"
    st-safe-src="safeSrcItems"
    class="hz-magic-search-context">

    <div class="row">
      <div class="hz-dynamic-table-preamble col-xs-12">
        <hz-magic-search-bar class="hz-magic-search-bar" ng-if="filterFacets"></hz-magic-search-bar>
        <actions class="hz-dynamic-table-actions" ng-if="batchActions"
                 allowed="batchActions" type="batch" result-handler="resultHandler">
        </actions>
      </div>
    </div>

    <table class="table table-striped table-rsp table-detail">
      <thead>
      <!--
        This is where we display number of items and pagination controls in
        the header.
      -->
        <tr>
            <td hz-table-footer colspan="100" items="items"></td>
        </tr>
        <!--
          Table-column-headers:
          Set selectAll to True if you want to enable select all checkbox.
          Set expand to True if you want to inline details.
        -->
        <tr>
          <th ng-show="config.selectAll" class="multi_select_column">
            <div class="themable-checkbox">
              <input type="checkbox" id="hz-table-select-all" hz-select-all="items">
              <label for="hz-table-select-all"></label>
            </div>
          </th>
          <th ng-show="config.expand" class="expander"></th>
          <th ng-repeat="column in config.columns"
            class="rsp-p{$ column.priority $}"
            st-sort="{$ column.id $}"
            ng-attr-st-sort-default="{$ column.sortDefault $}"
            translate
            ng-if="columnAllowed(column)">
            {$ column.title $}
          </th>
          <th ng-if="itemActions"></th>
        </tr>
      </thead>

      <tbody>
        <!--
          Table-rows:
          classes rsp-p1 rsp-p2 are responsive priority as user resizes window.
        -->
        <tr ng-repeat-start="item in items track by item[config.trackId]"
            ng-class="{'st-selected': checked[item[config.trackId]],
                       'warning': itemInTransitionFunction(item)}">

          <td ng-show="config.selectAll" class="multi_select_column">
            <div class="themable-checkbox">
              <input type="checkbox"
                     id="{$ item[config.trackId] $}"
                     ng-model="tCtrl.selections[item[config.trackId]].checked"
                     hz-select="item">
              <label for="{$ item[config.trackId] $}"></label>
            </div>
          </td>
          <td ng-show="config.expand" class="expander">
            <span class="fa fa-chevron-right"
              hz-expand-detail
              duration="200">
            </span>
          </td>
          <td ng-repeat="column in config.columns"
            class="rsp-p{$ column.priority $} {$ column.classes $}"
            ng-if="columnAllowed(column)">
            <hz-cell table="table" column="column" item="item"></hz-cell>
          </td>
          <td ng-if="itemActions" class="actions_column">
            <!--
              Table-row-action-column:
              Actions taken here apply to a single item/row.
            -->
            <actions allowed="itemActions" type="row" item="item" result-handler="resultHandler"></actions>
          </td>
        </tr>

        <!--
          Detail-row:
          Contains detailed information on this item.
          Can be toggled using the chevron button.
          Ensure colspan is greater or equal to number of column-headers.
        -->
        <tr ng-if="config.expand" ng-repeat-end class="detail-row">
          <td class="detail" colspan="100">
            <hz-detail-row template-url="config.detailsTemplateUrl">
            </hz-detail-row>
          </td>
        </tr>
        <tr hz-no-items ng-if="!config.needsFilterFirst" message="config.noItemsMessage" items="items"></tr>
        <tr>
          <td colspan="100" class="no-rows-help" ng-if="config.needsFilterFirst" translate>{$ 'Please provide a search criteria first.' $}</td>
        </tr>
      </tbody>

      <!--
        Table-footer:
        This is where we display number of items and pagination controls.
      -->
      <tfoot hz-table-footer items="items"></tfoot>
    </table>
  </div>
</hz-magic-search-context>
